import { useState, useEffect } from 'react'
import { Button, Card, Tabs, BackTop, Popconfirm, message } from 'antd';
import { SearchOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import './index.css'
import { gettitle, getinfo } from '../../plugins/getlogin'
import { Child } from './child'
import { useNavigate } from 'react-router-dom';
import mains from '../../assets/mains.png'
import {
    HomeOutlined,
    FormOutlined,
    MenuOutlined,
} from '@ant-design/icons';
export const Main = () => {
    const router = useNavigate()
    const [imgs, setimgs] = useState('');
    const [show, setshow] = useState([]);
    useEffect(() => {
        gettitle().then(e => {
            setshow(e.data)
        })
        getinfo().then(e => {
            setimgs(e.data[1])

        })
    }, []);




    const back = () => {
        var type = document.querySelector('.ant-tabs-tab-btn');
        type.click();
    }
    const push = () => {
        router('/push')
    }
    const my = () => {
        setTimeout(() => {
            router('/my')

        }, 1000)

    }
    const take = () => {
        var geren = document.querySelector('.geren');
        setTimeout(() => {
            geren.style.display = 'none';

        }, 1000)

    }
    var time = true
    const right = () => {
        var geren = document.querySelector('.geren');

        if (time) {
            geren.style.display = 'block'; time = false
        }
        else {
            geren.style.display = 'none'; time = true

        }
    }
    const gomy = () => {
        router('/my')
    }
    var style = {
        fontSize: '3rem',

    };
    const sure = () => {
        message.success('退出成功！')
        localStorage.removeItem('TOKEN')
        router('/')

    }
    const connect = () => {
        router('/connect')
    }
    const set = () => {
        router('/set')
    }
    const search = () => {
        router('/search')

    }
    const styles = {
        height: 40,
        width: 40,
        lineHeight: '40px',
        borderRadius: 4,
        backgroundColor: '#1088e9',
        color: '#fff',
        textAlign: 'center',
        fontSize: 14,
        position: 'fixed',
        top: '30rem',
    }
    return (
        <div>
            <Card style={{ width: '100vw' }}>
                <div className="header">
                    <img src={imgs.img} alt="" className='mianimg' onClick={gomy} />
                    <div>MyBLOG</div>
                    <div onClick={search}>  <Button type="default" shape="circle" icon={<SearchOutlined />} size="large" /></div>
                </div>

                <Tabs defaultActiveKey="1" >
                    {show.map((item, index) => {
                        return <Tabs.TabPane tab={item.title} key={index}  >
                            <Child title={item.id}></Child>
                        </Tabs.TabPane>
                    })

                    }
                </Tabs>
            </Card>


            <Card style={{ width: '100vw' }} className='foot'>
                <div>
                    <HomeOutlined style={style} className='left' onClick={back} />      <FormOutlined twoToneColor="#eb2f96" style={style} className='center' onClick={push} />
                    <MenuOutlined style={style} className='right' onClick={right} /> <div className='geren' onClick={take}><div onClick={my}>个人中心</div><div onClick={set}>状态访问</div>
                        <Popconfirm
                            title="你确定退出登录吗？"
                            cancelText='取消'
                            okText='确认'
                            onConfirm={sure}
                            icon={
                                <QuestionCircleOutlined
                                    style={{
                                        color: 'red',
                                    }}
                                />
                            }
                        >
                            <div>退出登录</div>
                        </Popconfirm>



                        <div onClick={connect}>联系我吧</div>
                        <img src={mains} alt="" className='img' />
                    </div>
                </div>
            </Card>
            <BackTop>
                <div style={styles}>UP</div>
            </BackTop>
        </div>


    )
}